<template>
	<uni-transition :show="show" mode-class="slide-right" :duration="500">
		<view style="background-color: #F4FAF8; height: 2000rpx;">
			<tabbar title="修改密码" v-model:show="show"/>
			<view class="flex justify-center" style="margin-top: 110rpx;">
				<view class="box">
					<text class="title">修改密码后请牢记新密码</text>
					<!-- <view >
						<text style="margin-top: 50rpx; color: #999; font-size: 28rpx;">加载中...</text>
					</view> -->
					<view >
						<!-- 只有当用户有密码时才显示原密码输入框 -->
						<view v-if="isShow">
						  <input type="text" placeholder="请输入原密码" password="true" style="margin-top: 50rpx;" v-model="oldPassword"/>
						</view>
						<input type="text" placeholder="请输入新密码" password="true" style="margin-top: 40rpx;" v-model="newPassword"/>
						<input type="text" placeholder="请再次输入新密码" password="true" v-model="againPassword"/>
					</view>
				</view>
			</view>
			<view class="flex justify-center">
				<button class="cu-btn bg-green-custom" @click="samePassword">修改密码</button>
			</view>
		</view>
	</uni-transition>
</template>

<script setup lang="ts">
import uniTransition from '@/uni_modules/uni-transition/components/uni-transition/uni-transition.vue';
import tabbar from '@/components/tabbar.vue';
import { ref,onMounted, type Ref } from 'vue';
import { useSave } from '@/store/index';
import { userUpdate, type userputType } from '@/api/user_api';

//定义一个布尔值控制返回事件
const show:Ref<boolean> = ref(false);
const changePasswordStore = useSave();

// let ID:Ref<string | undefined> = ref(changePasswordStore.userInfo?.objectId)
// console.log(ID);
//拿到input中的值
const oldPassword:Ref<string> = ref('')//旧密码
const newPassword:Ref<string> = ref('')//新密码
const againPassword:Ref<string> = ref('')//再次输入密码
// console.log(newPassword);
console.log('状态机数据',changePasswordStore.userInfo);

//定义一个字段控制旧密码输入框的显示和隐藏
const isShow:Ref<boolean> = ref(false)
//判断是否是第一次修改密码
const checkPassword=()=>{
	// console.log(changePasswordStore.userInfo?.password);
	if(changePasswordStore.userInfo?.password){
		isShow.value = true
		// console.log(isShow);
	}
}


//两次输入密码判断是否一致
const samePassword= async()=>{
	if(newPassword.value===againPassword.value){
	// 密码相同，准备更新
		if(!changePasswordStore.userInfo){
			// 用户信息不存在，提示错误
			uni.showToast({
				title: '未找到用户信息，请重新登录',
				icon: 'none',
				duration: 2000
			});
			return;
		}
		//旧密码判断
		if(isShow.value = true){
			if(oldPassword.value===changePasswordStore.userInfo.password){
				console.log('旧密码识别成功');
			}else{
				uni.showToast({
					title: '旧密码错误',
					icon: 'none',
					duration: 2000
				});
				return
			}
		}
		// 更新密码字段
		changePasswordStore.userInfo.password = newPassword.value;
		console.log('更新后的用户信息:', changePasswordStore.userInfo);
		
		// 显示成功提示
		uni.showToast({
			title: '密码更新成功',
			icon: 'success',
			duration: 2000
		});
		
		//状态机更新密码成功后把新密码导入数据库
		const passwordDate:userputType = {password:newPassword.value}//数据包
		console.log(passwordDate);
		const passwordUpdateTobase = await userUpdate(passwordDate) 
		console.log(passwordUpdateTobase);
		// 延迟返回
		setTimeout(() => {
			uni.navigateBack({delta:1});
		}, 1500);
	}else{
		// 密码不一致，提示错误
		uni.showToast({
			title: '两次输入的密码不一致',
			icon: 'none',
			duration: 2000
		});
	}
}



// 生命周期，保证动画效果
onMounted(() => {
	checkPassword()
  // 延迟显示以触发动画
  setTimeout(() => {
    show.value = true;
  }, 50);
});


	
</script>

<style lang="scss">
.box{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 650rpx;
	background-color: #fff;
	border-radius: 40rpx;
	box-shadow: 5rpx 5px 50rpx rgba(147,160,151, 0.2);
	padding-bottom: 70rpx;
}
.title{
	font-size: 33rpx;
	font-weight: bold;
	margin-top: 70rpx;
}
input{
	background-color: #F4FAF8;
	margin-bottom: 20rpx;
	width: 570rpx;
	height: 100rpx;
	border-radius: 20rpx;
	padding-left: 30rpx;
}
button{
	width: 450rpx;
	margin-top: 60rpx;
	color: #fff;
	background-color: #2DD296;
	border-radius: 20rpx;
}
</style>